<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<script type="text/javascript" src="lib/PIE_IE678.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.7/iconfont.css" />
<link rel="stylesheet" type="text/css" href="lib/icheck/icheck.css" />
<link rel="stylesheet" type="text/css" href="skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--[if IE 6]>
<script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<title>折线图</title>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 统计管理 <span class="c-gray en">&gt;</span> 折线图 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
<div class="page-container">
	<div class="f-14 c-error"></div>
	<div id="container" style="min-width:700px;height:400px"></div>
</div>


<form id="distance">
	<div class="row cl" style="display:none;">
			<td class="text-r">
				车辆编号：
			</td> 
			<input type="text" class="input-text"
				style="width: 150px" placeholder="" name="entity_name" id="entity_name" value="${param.username }">
			<td class="text-r">
			</div>
		</div>
<div class="text-c"> 选择日期：
<input type="text" onfocus="WdatePicker({dateFmt:'yyyy-M-d H:mm:ss',datetimestart:'#F{$dp.$D(\'datemax\')||\'%y-%M-%d \'}'})" id="datetimestart" class="input-text Wdate" style="width:200px;">
			<span class="c-gray en">&gt;</span> <span class="c-gray en">&gt;</span>
<input type="text" onfocus="WdatePicker({dateFmt:'yyyy-M-d H:mm:ss',datetimeend:'#F{$dp.$D(\'datemax\')||\'%y-%M-%d \'}'})" id="datetimeend" class="input-text Wdate" style="width:200px;">
<button type="button"  onclick="query()" class="btn btn-success radius" id="" name=""><i class="Hui-iconfont">&#xe665;</i> 统计查询</button>
</form>

</div>
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="lib/layer/2.1/layer.js"></script>
<script type="text/javascript" src="js/H-ui.js"></script> 
<script type="text/javascript" src="js/H-ui.admin.js"></script>
<script type="text/javascript" src="lib/Highcharts/4.1.7/js/highcharts.js"></script>
<script type="text/javascript" src="lib/Highcharts/4.1.7/js/modules/exporting.js"></script>
<script type="text/javascript" src="lib/My97DatePicker/WdatePicker.js"></script>

<script type="text/javascript">

$(function () {
    $('#container').highcharts({
        title: {
            text: '行驶里程统计',
            x: -20 //center
        },
        subtitle: {
            text: '来源: WorldClimate.com',
            x: -20
        },
        xAxis: {
            categories: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月']
        },
        yAxis: {
            title: {
                text: '里程 (KM)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: 'KM'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: '京M09478',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 100]
        }]
    });
});

</script>


<script type="text/javascript">
function query() {
	var start = $('#datetimestart').val() + ":00";
	var end = $('#datetimeend').val() + ":00";
	start = start.replace(/-/g, "/");
	end = end.replace(/-/g, "/");
	console.log(start + "val()" + end);
	var startDate = new Date(start);
	var endDate = new Date(end);
	var timespan = endDate.getTime() - startDate.getTime();
	console.log(startDate + "val()" + end + ":" + timespan);
	console.log(timespan);
	if (timespan > 24 * 3600 * 1000) {

		alert('时间段不能超过一天');
		return;
	}
	var now = new Date();
	if (endDate.getTime() - now.getTime() > 0) {
		alert('结束时间不能超过当前时间');
		return;
	}
	var starttimestamp = Date.parse(startDate);
	var endttimestamp = Date.parse(endDate);
	console.log(starttimestamp + "时间戳/1000之前" + endttimestamp);
	starttimestamp = starttimestamp / 1000;
	endttimestamp = endttimestamp / 1000;
	console.log(starttimestamp + "时间戳" + endttimestamp);
	

	$.ajax({
		type: 'get',
		url: '<%=path%>/DistanceAction.action',
		dataType: 'json',
		data : {
			ak : '0EqkFfOceuwLZnVvG6dIocEiqos83G34',
			service_id : 117396,
			entity_name : '${param.username}',
			start_time : starttimestamp,
			end_time : endttimestamp,
			simple_return : 2,
			is_processed : 1, 
			page_index : 1,
			page_size : 5000,
			sort_type : 1
		}, 
		success: function(result) {
			console.info("result"+result);
			alert("统计成功");
		},
		error: function() {
			alert('统计失败');
		}
	})
};
</script>
</body>
</html>